<template>
  <section class="component expression-base">
    <p v-if="preView" v-html="preViewExpressionStr"></p>
    <data-box class="expression-base-data-box" style="height:110px;overflow-y:auto" :data="expressionDataSet">
      <template slot="columns" v-if="showIn">
        <el-table-column prop="channel" label="剔除渠道" :formatter="(row) => $filter.dictConvert(row.channel,'ChannelType')"> </el-table-column>
        <el-table-column prop="expiryDate" label="有效日期" :formatter="(row) => $filter.dateFormat(row.expiryDate)"> </el-table-column>
        <el-table-column prop="strategyEliminateType" label="剔除类型" :formatter="(row) => $filter.dictConvert(row.strategyEliminateType,'StrategyEliminateType')"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="dele(scope.$index)" :disabled="deleDisbled">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <template slot="columns" v-else>
        <el-table-column v-if="flag" prop="caseNumber" label="账户号"> </el-table-column>
        <el-table-column prop="channelType" label="剔除渠道" :formatter="(row) => $filter.dictConvert(row.channelType,'ChannelType')"> </el-table-column>
        <el-table-column prop="effectiveTime" label="有效日期" :formatter="(row) => $filter.dateFormat(row.effectiveTime)"> </el-table-column>
        <el-table-column prop="strategyEliminateType" label="剔除类型" :formatter="(row) => $filter.dictConvert(row.strategyEliminateType,'StrategyEliminateType')"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="dele(scope.$index)" :disabled="deleDisbled">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Emit, Model, Watch } from "vue-property-decorator";
import { Form } from "element-ui";
import { FormItem } from "./strategy-helper.config";
import DataBox from "~/components/common/data-box.vue";

@Component({
  components: {}
})
export default class FromBase extends Vue {
  @Model("from-change")
  private expressionDataSet: FormItem[];

  @Prop({ type: Boolean }) private deleDisbled: boolean
  @Prop({ type: Boolean }) private flag: boolean
  @Prop({ type: Boolean }) private showIn: boolean

  private fieldDataSet: any[] = []
  private preView = false;
  @Emit("from-change")
  private emitExpressionDataSet (data) { }

  private dele (index) {
    this.expressionDataSet.splice(index, 1)
  }
}
</script>

<style lang="less" scoped>
.component.expression-base {
  .expression-base-data-box {
    padding: 0;
  }
}
</style>
